<script>
import * as echarts from 'echarts'

import KCard from '@/components/KCard'
import RingChart from './RingChart.vue'

export default {
    components: {
        KCard,
        RingChart
    },
    props: {
        width: {
            default: '100%',
        },
        height: {
            default: '300px',
        },
        data: {
            required: true,
            default() {
                return null
            }
        },
        loading: {
            type: Boolean
        }
    },
    data() {
        return {
            educationLevelMap:{
                fiveDown:'5K以下',
                ten:'5K-10K',
                fifteen:'10K-15K',
                twenty:'15K-20K',
                twentyUp:'20K以上',
            }
        }
    },
    computed: {
        salaryForamtted(){
            if(this.data === null)return []

            const keys = Object.keys(this.data)

            return keys.map(key => {
                let value = this.data[key],
                    label = this.educationLevelMap[key] ?? key
                return { label,value }
            })
        },
    },
    methods: {

    },
    mounted() {

    },
}
</script>

<template>
    <KCard title="薪资占比" v-loading="loading">
        <RingChart :data="salaryForamtted" :height="height" :width="width" />
    </KCard>
</template>

<style lang="scss"></style>
